import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
import 'package:get/get_state_manager/src/rx_flutter/rx_getx_widget.dart';
import 'package:get/get_state_manager/src/simple/get_view.dart';
import 'package:yyshort/common/model/video_model.dart';
import 'package:yyshort/pages/home/index.dart';

import '../../../common/widgets/image.dart';

class MasonryGridWidget extends GetView<HomeController> {
  final ValueChanged<VideoModel>? clickItem;

  const MasonryGridWidget({super.key, this.clickItem});

  @override
  Widget build(BuildContext context) {
    return GetX<HomeController>(
      builder: (controller) {
        return MasonryGridView.count(
          // 列数设置为2
          crossAxisCount: 2,
          // 上下间隔设置为6
          mainAxisSpacing: 6,
          // 左右间隔设置为6
          crossAxisSpacing: 6,
          // 禁用自身滚动，适应父级滚动组件
          physics: const NeverScrollableScrollPhysics(),
          // 适应内容高度
          shrinkWrap: true,
          // 内边距，让整体与父容器有间距
          padding: const EdgeInsets.all(6.0),
          // 构建每个网格项
          itemBuilder: (context, index) =>
              _buildGridItem(controller.state.trendingList[index]),
          itemCount: controller.state.trendingList.length,
        );
      },
    );
  }

  // 构建单个网格项
  Widget _buildGridItem(VideoModel item) {
    // 169, 236(大小比例16.9：23.6)
    double itemWidth = (ScreenUtil().screenWidth - (3 * 6)) / 2;

    // double itemWidth = 169.w;
    // 高度可以结合业务逻辑动态设置，这里演示在一个合理范围内随机（比如 200 - 300 逻辑像素范围，再转成适配后的 h ）
    double randomHeight = itemWidth * (236 / 169).h;
    double itemHeight = randomHeight.h; // 圆角 9pt 对应逻辑像素
    double borderRadius = 9.w;

    return ClipRRect(
      borderRadius: BorderRadius.circular(borderRadius),
      child: GestureDetector(
        onTap: () => clickItem!(item),
        child: Container(
          // width: itemWidth,
          // height: itemHeight,
          color: const Color(0xFF1C1C1C), // 对应 Android 里的背景色 #FF1C1C1C
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 图片部分
              ClipRRect(
                borderRadius: BorderRadius.only(
                  topLeft: Radius.circular(borderRadius),
                  topRight: Radius.circular(borderRadius),
                ),
                // child: netImageCached(
                //   item.imgUrl!, // 假设 VideoModel 里有 coverUrl 字段存封面图地址
                //   width: itemWidth,
                //   height: itemHeight - 56, // 预留标题和副标题的高度，可根据实际调整
                // ),
                child: CachedNetworkImage(
                  imageUrl: item.imgUrl!, // 假设 VideoModel 里有 coverUrl 字段存封面图地址
                  width: itemWidth,
                  height: itemHeight, // 预留标题和副标题的高度，可根据实际调整
                  fit: BoxFit.cover,
                  placeholder: (context, url) =>
                      const Center(child: CircularProgressIndicator()),
                  errorWidget: (context, url, error) => const Icon(Icons.error),
                ),
              ),
              // 标题
              Padding(
                padding: const EdgeInsets.only(
                  left: 8,
                  top: 8,
                ), // 对应 iOS 里的 left 23.5
                child: Text(
                  item.name!, // 假设 VideoModel 里有 title 字段
                  style: const TextStyle(
                    color: Colors.white,
                    fontSize: 14, // 28/2 = 14，对应 iOS 里的 size:28/2
                    fontFamily: "PingFangSC",
                    fontWeight: FontWeight.w600,
                  ),
                  maxLines: 2, // 标题可能换行，限制行数
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              SizedBox(height: 10),
              // 副标题
              // Padding(
              //   padding: const EdgeInsets.only(
              //     left: 23.5,
              //     top: 4,
              //   ), // 对应 iOS 里的 left 23.5、top 间距
              //   child: Text(
              //     "简介。。。", //
              //     style: const TextStyle(
              //       color: Color(0xFF919191), // 145/255 近似色
              //       fontSize: 12, // 24/2 = 12，对应 iOS 里的 size:24/2
              //       fontFamily: "PingFangSC",
              //     ),
              //   ),
              // ),
            ],
          ),
        ),
      ),
    );
  }
}
